<template>
  <div class="chhealth flex">
    <div class="chhealth-search">
      <p>学生档案</p>
      <div class="search-main">
        <el-form
          :model="queryParams"
          ref="queryForm"
          :inline="true"
          label-width="68px"
        >
          <div>
            <el-form-item label="班级" prop="classId">
              <el-select
                v-model="queryParams.classId"
                filterable
                clearable
                placeholder="请选择班级"
              >
                <el-option
                  v-for="item in classList"
                  :key="item.id"
                  :label="item.label"
                  :value="item.id"
                  size="small"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="姓名" prop="studentName">
              <el-input
                v-model="queryParams.studentName"
                placeholder="请输入姓名"
                clearable
                size="small"
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
          </div>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleQuery"
              >搜索</el-button
            >
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
              >重置</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="chhealth-student-list">
      <div>
      <div class="list-main" v-if="studentList.length > 0">
        <div
          class="mian-item"
          v-for="(item, index) in studentList"
          :key="index"
        >
          <div class="item-top">
            <div class="item-left">
              <div class="left-img">
                <img :src="item.headmage" alt="" />
              </div>
              <div class="left-text">
                <p style="font-size: 16px; font-weight: 500">
                  {{ item.studentName }}
                </p>
                <p
                  style="
                    font-size: 14px;
                    font-weight: 400;
                    color: #333333;
                    display: flex;
                  "
                >
                  <dict-tag
                    :options="dict.type.sys_user_sex"
                    :value="item.sex"
                  />
                  <span style="margin-left: 10px">{{ item.age }}岁</span>
                </p>
              </div>
            </div>
            <div class="item-right">
              <el-button type="primary" plain @click="seeMore(item)"
                >查看</el-button
              >
            </div>
          </div>
          <div class="item-bott">
            <div class="bott-left">班级:{{ item.className }}</div>
            <div class="bott-right">入园日期:{{ item.studydate }}</div>
          </div>
        </div>
      </div>
      <div v-else>暂无数据</div>
    </div>
    <!-- <div class="list-main-btn" v-if="studentList.length > 0">
        <el-button type="primary" class="left-btn" :disabled='queryParams.pageNum==1' @click="prevPage">上一页</el-button>
        <el-button type="primary" class="right-btn" :disabled='queryParams.pageNum == parseInt(total / queryParams.pageSize) + 1'  @click="nextPage">下一页</el-button>
      </div> -->
      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
          @pagination="getList" />
      </div>
  </div>
</template>
<script>
import { jylistStudent } from "@/api/base/student";
import { selectClazz } from "@/api/base/clazz";
import {
  getStudentArchiveslist,
  getStudentArchivesInfo,
} from "@/api/mindSystem/studentfile";
export default {
  name: "gzt",
  dicts: ["sys_user_sex"],
  data() {
    return {
      queryParams: {
        classId: null,
        studentName: null,
        pageSize:10,
        pageNum:1
      },
      classList: [],
      studentList: [],
      total:null
    };
  },
  created() {
    this.getList();
    this.getQueryClazzList();
    console.log(
      "@/api/mindSystem/studentfile",
      require("@/api/mindSystem/studentfile")
    );
  },
  methods: {
    // 上一页
    prevPage(){
      this.queryParams.pageNum--;
      this.getList()
    },
    // 下一页
    nextPage(){
      this.queryParams.pageNum++;
      this.getList()
    },
    // 查看
    async seeMore(item) {
      // let result; // 在函数作用域之外定义result

      // try {
      //   result = await getStudentArchivesInfo({id:item.id});
      //   console.log("Student Archives Info:", result);
      // } catch (error) {
      //   console.error("Error fetching student archives info:", error);
      // }

      this.$router.push({
        path: "/mindSystem/studetail",
        query: {
          classId: item.id,
          // result: result, // 传递result数据
        },
      });


    },
    /** 查询班级列表 */
    async getQueryClazzList() {
      try {
        this.loading = true;
        const { rows } = await selectClazz();
        this.classList = rows.map((item) => {
          return {
            id: item.id,
            label: item.title,
          };
        });
        this.loading = false;
      } catch (e) {
        console.log(e);
      }
    },
    /** 查询学生档案列表 */
    async getList() {
      try {
        this.loading = true;
        const data = await getStudentArchiveslist(this.queryParams);
        this.studentList = data.rows;
        this.total = data.total;
        this.loading = false;
      } catch (e) {
        console.log(e);
      }
    },
    // 表单重置
    reset() {
      this.form = {
        classId: null,
        studentName: "",
      };
      this.getFormclassList();
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
  },
};
</script>
<style lang="scss" scoped>
.chhealth {
  background-color: rgba(242, 243, 245, 1);
  box-sizing: border-box;
  .chhealth-search {
    margin: 30px;
    padding: 20px;
    background-color: #fff;
    .search-main {
      .el-form {
        display: flex;
        justify-content: space-between;
      }
    }
  }
  .chhealth-student-list {
    margin: 0 30px 20px 30px;
    background-color: #fff;
    padding: 20px;
    .list-main {
      display: flex;
      flex-wrap: wrap;
      .mian-item {
        width: 23%;
        height: 128px;
        padding: 16px;
        border-radius: 4px;
        border: 1px solid #dddddd;
        margin: 0 1% 16px;
        .item-top {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 18px;
          .item-left {
            display: flex;
            align-items: center;
            p {
              margin: 5px;
            }
            .left-img {
              width: 56px;
              height: 56px;
              margin-right: 17px;
              img {
                width: 100%;
                height: 100%;
                border-radius: 50%;
              }
            }
          }
        }
        .item-bott {
          display: flex;
          justify-content: space-between;
          font-size: 14px;
          font-weight: 400;
          color: #333333;
        }
      }
    }
  }
}
.flex {
  display: flex;
  flex-direction: column;
}
.list-main-btn{
      text-align: center;
    }
</style>
